<template>
  <el-dialog v-model="inDialog.show" width="1000px" :title="inDialog.title">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 基本信息 Tab -->
      <el-tab-pane label="基本信息" name="basicInfo">
        <el-form
          v-show="activeTab === 'basicInfo'"
          ref="basicForm"
          size="small"
          label-width="auto"
          label-suffix="："
          class="dialogForm"
          :model="inBasicData"
          :rules="basicRules"
        >
          <el-row :gutter="8">
            <el-col :span="12">
              <el-form-item label="账号" prop="username">
                <el-input v-model="inBasicData.username" />
              </el-form-item>
              <el-form-item label="工号" prop="employeeAccount">
                <el-input v-model="inBasicData.employeeAccount" />
              </el-form-item>
              <el-form-item label="手机" prop="phone">
                <el-input v-model.number="inBasicData.phone" />
              </el-form-item>
              <el-form-item label="qq" prop="qq">
                <el-input v-model="inBasicData.qq" />
              </el-form-item>
              <el-form-item label="应收级别" prop="incomeLevel">
                <el-select v-model="inBasicData.incomeLevel">
                  <el-option :value="1" />
                  <el-option :value="2" />
                  <el-option :value="3" />
                  <el-option :value="4" />
                  <el-option :value="5" />
                  <el-option :value="6" />
                </el-select>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="inBasicData.gender">
                  <el-option value="男"> </el-option>
                  <el-option value="女"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="inBasicData.realName" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="inBasicData.email" />
              </el-form-item>
              <el-form-item label="座机" prop="phoneNumber">
                <el-input v-model="inBasicData.phoneNumber" />
              </el-form-item>
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="inBasicData.nickName" />
              </el-form-item>
              <el-form-item label="应付级别" prop="costLevel">
                <el-select v-model="inBasicData.costLevel">
                  <el-option :value="1" />
                  <el-option :value="2" />
                  <el-option :value="3" />
                  <el-option :value="4" />
                  <el-option :value="5" />
                  <el-option :value="6" />
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="inBasicData.enabled">
                  <el-option label="激活" :value="true"> </el-option>
                  <el-option label="禁用" :value="false"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <!-- 其他信息 Tab -->
      <el-tab-pane label="其他信息" name="otherInfo">
        <el-form
          v-show="activeTab === 'otherInfo'"
          ref="otherForm"
          size="small"
          label-width="auto"
          label-suffix="："
          class="dialogForm"
          :model="inOtherData"
          :rules="otherRules"
        >
          <el-form-item label="公司" prop="companyId">
            <el-tree-select
              v-model="inOtherData.companyId"
              clearable
              value-key="id"
              check-strictly
              placeholder="请选择公司"
              :data="companyTree"
              :render-after-expand="false"
              @change="nodeClick"
            >
              <template #default="{ data }">
                <el-option :label="data.name" :value="data.id" />
              </template>
            </el-tree-select>
          </el-form-item>

          <el-form-item label="部门" prop="deptId">
            <el-tree-select
              v-model="inOtherData.deptId"
              clearable
              value-key="id"
              check-strictly
              placeholder="请选择部门"
              :data="deptTree"
              :render-after-expand="false"
            >
              <template #default="{ data }">
                <el-option :label="data.name" :value="data.id" />
              </template>
            </el-tree-select>
          </el-form-item>
          <el-form-item label="岗位" prop="jobs">
            <el-select
              v-model="inOtherData.jobs"
              multiple
              value-key="id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in jobData"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="roles">
            <el-select
              v-model="inOtherData.roles"
              multiple
              value-key="id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in roleData"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import { isvalidPhone } from "@/utils/validate";
export default defineComponent({
  props: {
    dialog: {
      type: Object,
      default: () => {},
    },
    basicData: {
      type: Object,
      default: () => {},
    },
    otherData: {
      type: Object,
      default: () => {},
    },
    companyTree: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:dialog", "update:basicData", "update:otherData", "submit"],
  computed: {
    inDialog: {
      get() {
        return this.dialog;
      },
      set(value) {
        this.$emit("update:dialog", value);
      },
    },
    inBasicData: {
      get() {
        return this.basicData;
      },
      set(value) {
        this.$emit("update:basicData", value);
      },
    },
    inOtherData: {
      get() {
        return this.otherData;
      },
      set(value) {
        this.$emit("update:otherData", value);
      },
    },
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      //用户表单规则
      basicRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        phone: [{ required: true, trigger: "blur", validator: validPhone }],
        nickName: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        employeeAccount: [
          { required: true, trigger: "blur", message: "请输入员工工号" },
        ],
        qq: [{ required: true, trigger: "blur", message: "请输入qq号" }],
        realName: [
          { required: true, trigger: "blur", message: "请输入真实姓名" },
        ],
        CostLevel: [
          { required: true, trigger: "blur", message: "请选择应付级别" },
        ],
        IncomeLevel: [
          { required: true, trigger: "blur", message: "请选择应收级别" },
        ],
      },
      otherRules: {
        companyId: [
          { required: true, message: "请选择公司", trigger: "change" },
        ],
        deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
        jobs: [{ required: true, message: "请选择岗位", trigger: "change" }],
        roles: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      activeTab: "basicInfo", // 初始化时激活基本信息标签页
      //用户弹窗数据
      userDialogData: {
        show: false,
        title: "新增用户",
      },
      roleData: [],
      jobData: [],
      deptTree: [],
    };
  },
  methods: {
    //表单下一步
    next(step) {
      if (step == 1) {
        this.$refs.basicForm.validate((vaild) => {
          if (vaild) {
            this.step = step;
          }
        });
      }
    },
    //表单上一步
    back(step) {
      this.step = step;
    },
    getFormJobsData() {
      this.$http
        .get("/api/job/query", {
          companyId: this.inOtherData.companyId,
          Enabled: true,
        })
        .then((res) => {
          this.jobData = res;
        });
    },
    getFormRolesData() {
      this.$http.get("/api/role/all").then((res) => {
        this.roleData = res;
      });
    },
    getDeptTreeData() {
      this.$http
        .get("/api/department/buildTree", {
          KeyWords: "",
          CompanyId: this.inOtherData.companyId,
        })
        .then((res) => {
          this.deptTree = res;
        });
    },
    submit() {
      this.$emit("submit");
    },
    nodeClick(nodeId) {
      this.inOtherData.deptId = "";
      this.inOtherData.jobs = [];
      this.getDeptTreeData();
      this.getFormJobsData();
    },
  },
  watch: {
    "inDialog.show"(newVal) {
      if (newVal) {
        this.step = 0;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.getFormJobsData();
            this.getDeptTreeData();
          });
        });
      }
    },
    // "inOtherData.companyId"(newVal) {
    //   this.getDeptTreeData();
    // },
  },
  mounted() {
    this.getFormRolesData();
  },
});
</script>

<style lang="scss" scoped></style>
